<template>
  <div>
    <div>
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh" style="height:calc(100vh - 46px);overflow: auto;">
        <van-list v-model="loading" :finished="finished" finished-text="我是有底线的" @load="onLoad" v-if="getList.length>0" :immediate-check="true"
          :offset="10">
          <div v-for="item in getList" :key="item.id">
            <div class="contentMsg" @click="$router.push(`/projectDetail?id=${item.id}`)">
              <div class="byTime">
                <span :class="item.status=='2'?'red':'green'">{{item.statusName}}</span> 截止时间 {{common.formatD(item.dueTime)}}
              </div>
              <div class="contentText">
                <van-row>
                  <van-col span="11" offset="1" class="tal">
                    <span class="font38">{{item.content}}</span>
                  </van-col>
                  <van-col span="10" offset="1" class="tar"></van-col>
                </van-row>
                <van-row class="pt3">
                  <van-col span="12" class="tac">
                    <p><span class="red">{{item.minAmt}}</span>USDT</p>
                    <p class="font28">起投金额</p>
                  </van-col>
                  <van-col span="12" class="tac">
                    <p class="red">{{item.term }} {{item.termUnitName}}</p>
                    <p class="font28">投资期限</p>
                  </van-col>
                </van-row>
                <van-row class="progress">
                  <van-progress :color="item.status=='2'?'#4caf50':'#e8bb57'" :percentage="item.percentage" stroke-width="14" />
                </van-row>
                <van-row class="pt3">
                  <van-col span="12" class="tac">
                    <span>完成{{item.percentage}}%</span>
                  </van-col>
                  <van-col span="12" class="tac">
                    <span>项目金额<span class="red">{{common.formatAmount(item.totalAmt)}}</span>USDT</span>
                  </van-col>
                </van-row>
              </div>
            </div>
          </div>
        </van-list>
        <div v-else class="list_text">{{listText}}</div>
      </van-pull-refresh>

    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      isLoading: false,
      finished: false,  //是否已加载完所有数据
      loading: false,  //是否已加载完所有数据
      data: {
        pageSize: 10,
        currentPage: 1,
        status: '',
      },
      getList: [],
      listText: '',
    }
  },
  methods: {
    onLoad () {      //上拉加载
      setTimeout(() => {
        this.data.currentPage++
        this.projectList()
        this.loading = true
      }, 500)
    },
    onRefresh () {
      setTimeout(() => {
        this.$toast('刷新成功');
        this.data.currentPage = 1;
        this.isLoading = false;
        this.finished = false
        this.getList = []
        this.projectList()
      }, 500);
    },
    //获取项目列表
    async projectList () {
      const url = '/project/queryMyPage'
      let result = await this.request.mobileRequest('POST', url, this.data)
      if (result.code == 200) {
        this.loading = false
        for (let i of result.data.datas) {
          i.percentage = Number((i.availableAmt / i.totalAmt * 100).toFixed(0))
        }
        if (this.data.currentPage == 1) {
          this.getList = result.data.datas
        } else {
          if (result.data.datas != '' && this.data.currentPage > 1) {
            this.getList = this.getList.concat(result.data.datas)
          }
        }
        if (result.data.datas.length < this.data.pageSize) {
          this.finished = true
        }
        if (this.getList.length == 0) {
          this.listText = '暂无数据'
        }
      } else {
        this.$notify({ type: 'warning', message: result.msg });
      }
    }
  },
  mounted () {
    this.projectList();
  }
}
</script>

<style scoped>
.van-col p {
  font-size: 0.38rem;
  line-height: 0.4rem;
  margin-top: 0.2rem;
}
</style>
